import Workplace from "../components/layout/workplace";
import { Row, Col, Card, Breadcrumb } from "antd";
import ProfileDescription from "../components/description-profile";
import useSWR from "swr";
import fetcher from "../components/fetcher";
import { useEffect } from "react";
import LoadingSpin from "../components/spin-loading";

const Profile = () => {
  // console.log(data)
  const { data, error } = useSWR("/api/profile", fetcher);
  // BUG: data may not always be ready, so when read data.name, it will fail
  if (error) {
    console.log("fetch data error:", error);
  }
  if (!data) {
    return <LoadingSpin />;
  }

  const breadcrumb = (
    
    <Breadcrumb>
      <Breadcrumb.Item>设置</Breadcrumb.Item>
      <Breadcrumb.Item>我的信息</Breadcrumb.Item>
    </Breadcrumb>
  );

  return (
    <Workplace breadcrumb={breadcrumb} currentTab="profile" profile={data}>
      <Row justify="center" align="top">
        <Col span={12}>
          <Card>
            <ProfileDescription profile={data} />
          </Card>
        </Col>
      </Row>
    </Workplace>
  );
};

Profile.auth = true;
export default Profile;
